<template>
  <div class="content">
    <div class="header">
      <a href="javascript:;" class="logo">xxx音乐后台管理</a>
    </div>
    <div class="leftbox">
      <div class="left">
        <ul class="fristnav">
          <li v-for="(item, index) in arr" :key="index">
            <a href="javascript:;" @click="user(index)" class="firsttitlt">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
              <i class="iconfont one" v-if="!item.bool">&#xe662;</i>
              <i
                class="iconfont icon-icon_jiantou-xia one"
                v-if="item.bool"
              ></i>
            </a>
            <ul v-if="item.bool">
              <li v-for="(items, indexs) in item.child" :key="indexs">
                <a
                  href="javascript:;"
                  class="firsttitlt"
                  @click="secondtitle(indexs, index, items.name)"
                >
                  <i class="iconfont two">&#xe662;</i>
                  <span>{{ items.name }}</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="rightnavbox">
        <ul class="rightnav">
          <li v-for="(item, index) in arr1" :key="index" @click="dianji(item)">
            {{ item }}
            <i
              class="iconfont icon-guanbi"
              @click.stop="close(index, item)"
            ></i>
          </li>
        </ul>
      </div>
      <div class="rightcontent">
        <!-- 页面 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: false,
      arr: [
        {
          name: "用户管理",
          child: [{ name: "用户列表" }],
          bool: false,
          icon: "iconfont icon-yonghu",
        },
        {
          name: "管理员管理",
          child: [{ name: "管理员列表" }],
          bool: false,
          icon: "iconfont icon-guanliyuan",
        },
        {
          name: "音乐管理",
          child: [{ name: "音乐列表" }],
          bool: false,
          icon: "iconfont icon-yinle",
        },
        {
          name: "歌单管理",
          child: [{ name: "歌单列表" }],
          bool: false,
          icon: "iconfont icon-gedan",
        },
      ],
      userbool: false,
      arr1: [],
    };
  },
  methods: {
    user(idx) {
      this.arr[idx].bool = !this.arr[idx].bool;
    },
    secondtitle(idxs, idx, item) {
      if (this.arr1.indexOf(this.arr[idx].child[idxs].name) == -1) {
        this.arr1.push(this.arr[idx].child[idxs].name);
      }
      sessionStorage.setItem("arr1", JSON.stringify(this.arr1));
      switch (item) {
        case "用户列表":
          this.$router.push({ path: "/user" });
          break;
        case "管理员列表":
          this.$router.push({ path: "/administrator" });
          break;
        case "音乐列表":
          this.$router.push({ path: "/singerList" });
        default:
          break;
        case "歌单列表":
          this.$router.push({ path: "/songtable" });
          break;
      }
    },
    // 关闭面包屑
    close(idx) {
      this.arr1.splice(idx, 1);
      sessionStorage.setItem("arr1", JSON.stringify(this.arr1));
      if (this.arr1.length != 0) {
        var x = this.arr1[this.arr1.length - 1];
        switch (x) {
          case "用户列表":
            this.$router.push({ path: "/user" });
            break;
          case "管理员列表":
            this.$router.push({ path: "/administrator" });
            break;
          case "歌单列表":
            this.$router.push({ path: "/songtable" });
            break;
          case "音乐列表":
            this.$router.push({ path: "/singerList" });
            break;
          default:
        }
      } else {
        this.$router.push({ path: "/" });
      }
    },
    // 面包屑页面跳转
    dianji(idex) {
      switch (idex) {
        case "用户列表":
          this.$router.push({ path: "/user" });
          break;
        case "管理员列表":
          this.$router.push({ path: "/administrator" });
          break;
        case "音乐列表":
          this.$router.push({ path: "/singerList" });
          break;
        default:
          break;
        case "歌单列表":
          this.$router.push({ path: "/songtable" });
          break;
      }
    },
  },
  mounted() {
    var x = sessionStorage.getItem("arr1");
    if (x != "" && x != null) {
      this.arr1 = JSON.parse(x);
    }
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 45px;
  background: #1a1b20;
  line-height: 45px;
  padding-left: 25px;
  box-sizing: border-box;
}
.header::after {
  content: "";
  clear: both;
  display: block;
}
.logo {
  float: left;
}
.leftbox {
  position: absolute;
  top: 45px;
  bottom: 0;
  background: #1a1b20;
}
.left {
  background: #1a1b20;
  width: 220px;
  text-align: center;
}
a {
  text-decoration: none;
  color: white;
}
.fristnav {
  text-align: left;
  padding-left: 40px;
  box-sizing: border-box;
}
.fristnav > li {
  margin: 20px 0;
}
.fristnav > li > ul {
  padding-left: 25px;
  box-sizing: border-box;
}
.fristnav > li > ul > li {
  margin-top: 15px;
}
.one {
  float: right;
  margin-right: 10px;
  font-size: 12px;
  margin-top: 4px;
}
.two {
  font-size: 12px;
  float: left;
  margin-top: 4px;
  margin-right: 7px;
}
.firsttitlt:hover {
  color: #ccc;
}
.right {
  position: absolute;
  left: 220px;
  right: 0;
  top: 45px;
  bottom: 0;
  background: rgb(245, 244, 244);
}
.rightnavbox {
  background: #efeef0;
  box-shadow: 0 0 5px #888888;
  height: 45px;
  line-height: 45px;
}
.rightnavbox::after {
  content: "";
  clear: both;
  display: block;
}
.rightnav > li {
  float: left;
  margin-left: 20px;
  cursor: pointer;
  text-align: center;
}
.rightnav > li:hover {
  color: skyblue;
  background: white;
}
.rightnav::after {
  content: "";
  clear: both;
  display: block;
}
.page {
  margin-top: 20px;
}
</style>